<template>
	<view class="content">
		<text class="title">密码修改</text>
		<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm" labelWidth="80">
			<u-form-item label="旧密码" prop="oldPassword">
				<u--input v-model="formData.oldPassword" placeholder="请输入旧密码" clearable password
					maxlength="16"></u--input>
			</u-form-item>
			<u-form-item label="新密码" prop="newPassword">
				<u--input v-model="formData.newPassword" placeholder="请输入新密码" clearable password
					maxlength="16"></u--input>
			</u-form-item>
			<u-form-item label="确认密码" prop="againPassword">
				<u--input v-model="formData.againPassword" placeholder="请再次输入新的密码" clearable password
					maxlength="16"></u--input>
			</u-form-item>
			<u-button type="primary" shape="circle" text="提交" @click="submit" class="btn"></u-button>
		</u--form>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	const crypto = require('crypto'); // 引入 crypto 模块
	export default {
		data() {
			return {
				formData: {
					oldPassword: '',
					newPassword: '',
					againPassword: ''
				},
				rules: {
					'oldPassword': {
						asyncValidator: (rule, value, callback) => {
							let userinfo = uni.getStorageSync('user')
							if (this.encrypByMd5(value + userinfo.salt) != userinfo.password) {
								callback(new Error('旧密码不正确'));
							} else {
								callback();
							}
						},
						trigger: ['blur']
					},
					'newPassword': {
						type: 'string',
						required: true,
						message: '请填写新密码',
						trigger: ['blur', 'change']
					},
					'againPassword': {
						asyncValidator: (rule, value, callback) => {
							let userinfo = uni.getStorageSync('user')
							if (value !== this.formData.newPassword) {
								callback(new Error('两次输入的新密码不一致'));
							} else {
								callback();
							}
						},
						trigger: ['blur', ]
					},
				},
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(r => {
					this.$api.userAddOrUpdate({
						id: uni.getStorageSync('user').id,
						password: this.formData.newPassword,
					}).then(res => {
						// console.log(res)
						this.$refs.uToast.show({
							type: 'success',
							message: '修改成功！',
							complete() {
								uni.navigateBack()
							}
						})
					})
				}).catch(errors => {
					this.$refs.uToast.show({
						type: 'error',
						message: "请填写完整内容",
					})
				})
			},
			encrypByMd5(context) {
				const md5 = crypto.createHash('md5'); // 创建 md5 算法实例
				md5.update(context); // update 处理
				const encryContext = md5.digest(); // 调用该方法完成计算
				let buf = '';
				for (let i = 0; i < encryContext.length; i++) { // 做相应的转化（十六进制）
					let hex = encryContext[i].toString(16);
					if (hex.length === 1) {
						hex = '0' + hex;
					}
					buf += hex;
				}
				return buf;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 40rpx;
		display: flex;
		flex-direction: column;

		.title {
			font-size: 34rpx;
			font-weight: bold;
			margin-bottom: 40rpx;
		}

		.u-form {
			display: flex;
			flex-direction: column;
		}

		.u-form-item {
			margin-bottom: 20rpx;
		}

		.btn {
			width: 80%;
			margin-top: 60rpx;
			background-color: #1678ff;
			border-color: #1678ff;
		}
	}
</style>